<template>
  <div class="shop-info" v-if="Object.keys(shopInfo).length!==0">
    <div class="top">
      <img :src="shopInfo.logo" alt="">
      <span class="title">{{shopInfo.name}}</span>
    </div>
    <div class="middle">
      <div class="item middle-left">
        <div class="sells">
          <p class="sells-count">{{ shopInfo.sells  | sellCountFilter}}</p>
          <p class="sells-text">总销量</p>
        </div>
        <div class="goods">
          <p class="goods-count">{{ shopInfo.goodsCount}}</p>
          <p class="goods-text">全部宝贝</p>
        </div>
      </div>
      <div class="item middle-right">
        <table>
          <tr v-for="(item,index) in shopInfo.score" :key="index">
            <td>{{item.name}}</td>
            <td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
            <td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高' : '低'}}</span></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="bottom">
      <div class="enter-shop">进店逛逛</div>
    </div>
  </div>
</template>

<script scoped>
export default {
   name: 'DetailShopInfo',
   props: {
     shopInfo: {
       type: Object,
       default: {}
     }
   },
   filters: {
     sellCountFilter: function(value){
       if(value < 10000) return value;
       return (value / 10000).toFixed(2) + '万'
     }
   }
}
</script>

<style lang='less' scoped>
  .shop-info {
    padding: .5rem .16rem;
    border-bottom: .1rem solid #f2f5f8;
    .top {
     height: 0.9rem;
     line-height: 0.9rem;
     img {
       width: 0.9rem;
       height: 0.9rem;
       border-radius: 50%;
       border: 1px solid rgba(0,0,0,.1);
       vertical-align: middle;
     }
     .title {
        margin-left: .2rem;
      }

    }
    .middle {
      display: flex;
      margin-top: 0.3rem;
      align-items: center;
      text-align: center;
      .item {
        flex: 1;
      }
      .middle-left {
        display: flex;
        color: #333;
        border-right: 1px solid rgba(0,0,0,.1);
        .sells {
          flex: 1;
          .sells-count {
            font-size: .36rem;
          }
          .sells-text {
            margin-top: 0.2rem;
            font-size:.24rem;
          }
        }
        .goods {
          flex: 1;
          .goods-count {
            font-size: .36rem;
          }
          .goods-text {
            margin-top: 0.2rem;
            font-size:.24rem;
          }
        }
      }
      .middle-right {
        display: flex;
        justify-content: center;
        table {
          width: 2.6rem;
          td {
            padding:.1rem 0;
          }
          .score {
            color: #5ea732;
          }
          .score-better {
            color: #f13e3a;
          }
          .better span {
            background-color: #5ea732;
            color: #fff;
            text-align: center;
          }
          .better-more span {
             background-color: #f13e3a;
          }
        }

      }
    }
    .bottom {
      margin-top: .2rem;
      .enter-shop {
        width: 3rem;
        height: 0.6rem;
        margin: 0 auto;
        line-height: 0.6rem;
        background-color: #f2f5f8;
        text-align: center;
        border-radius: .2rem;
      }
    }
  }
</style>
